<template>
    <div style="height:100vh;">
      <pull-to
      :bottom-load-method="infiniteHandler"
      :bottom-config="BOTTOM_DEFAULT_CONFIG">
        <articleTop :goods_img="data.goods_img" :user_name="data.user_name" :create_time="data.create_time" :head_ico="data.head_ico" :is_care="data.is_care"></articleTop>
        <div style="padding:4vw 4vw;border-bottom:1px solid #cecece;color:#333333;height: auto;margin-top: 22vw;
        overflow:hidden;"  v-html="data.contents">
          {{data.contents}}
        </div>
        <div style="padding:4vw;border-bottom:1px solid #cecece;height: auto;" class="comments">
          <h5 style="font-size:15px;color:#333333">
            <img src="@/assets/helpServerIcon/red.png"
                 style="height:14px;display:inline-block;margin-right:10px;font-weight:100;width: 2vw;"/>评论</h5>
          <ul v-if="data.comment_list.list.length>0">
            <li v-for="(item,index) in data.comment_list.list" :key="index">
              <div>
                <div class="headIcon">
                  <img :src="item.head_ico" alt="">
                </div>
                <span style="diaplay:inline-block;margin-left: 3vw;color:#666666;font-size:13px">{{item.user_name}}</span>
                <div v-if="item.is_thumb" class="zan" style="color:#FF4C50;font-size:12px">
                  <img src="@/assets/helpServerIcon/red_fabulous.png" alt="" style="width:16px"/>
                  <span>{{item.thumb_number}}</span>
                </div>
                <div v-else class="zan">
                  <img src="@/assets/helpServerIcon/fabulous.png" alt="" />
                  <span>{{item.thumb_number}}</span></div>
              </div>
              <div class="commetContent" v-html="item.contents">
                {{item.contents}}
              </div>
              <p class="commentTime">{{item.create_time}} <span style="float:right">回复</span></p>
              <ul v-if="item.reply.list.length>0">
                <li v-for="(item1,index1) in item.reply.list" :key="index1" style="padding:3vw;background:#f5f5f5;margin-left:11vw">
                  <span style="font-size:12px">{{item1.user_name}}：{{item1.contents}}</span>
                </li>
              </ul>
            </li>
          </ul>
          <div v-else style="margin-top:4vw;text-align:center">
            喜欢TA就留下评论，成为第一个评论的人吧
          </div>
          <div style="text-align:center;padding:3vw;border-top: 1px solid #cecece;"  v-if="data.comment_list.list.length>0">
            全部评论
          </div>
        </div>
        <!--<commet-list :commetList="data.comment_list"></commet-list>-->
        <article-list :article="articleList"></article-list>
      </pull-to>
      <tabs  :data="data"></tabs>
    </div>
</template>
<script>
import articleTop from "../../components/articleDetail/articleTop.vue";
import commetList from '@/components/articleDetail/comment.vue'
import articleList from '@/components/articleDetail/articleList.vue'
import PullTo from 'vue-pull-to'
import tabs from "../../components/articleDetail/tabs.vue";
import request from '@/request/index.js'
export default {
  name: "articleDetail",
  components: {
    articleTop,
    commetList,
    articleList,
    tabs,
    PullTo
  },
  filters: {
    unescape:function (html) {
      return html
        .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, "\"")
        .replace(/&#39;/g, "\'");
    }
  },
  data() {
    return {
      article_id:213,
      page:1,
      data:[],
      data1:{},
      id:'',
      category_id:'',
      articleList:[],
      BOTTOM_DEFAULT_CONFIG: {
        pullText: "上滑继续加载",
        triggerText: "释放更新",
        loadingText: "加载中,请稍后",
        doneText: "内容已全部展示了",
        failText: "加载失败",
        loadedStayTime: 1000,
        stayDistance: 50,
        triggerDistance: 50,
      },
    };
  },
  created(){
    this.id = this.$route.params.articleId;
  },
  methods:{
    infiniteHandler:function(loaded){
      if(this.page<this.data1.all_page){
        request.loadedRecommendArticle(this,loaded,this.id)
      }else{
         this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
         loaded("done");
        this.loaded = true;
      }
    }
  },
  mounted() {
    request.getFollowDetail(this,this.page);
    // request.getRecommendArticle(this);
  }
};
</script>

<style scoped lang="scss">
  #YSF-BTN-HOLDER {
    display: none !important;
  }
  .comments{
  .headIcon{
    width: 8vw;
    height:8vw;
    border-radius: 50%;
    overflow: hidden;
    float:left;
  img{
    width:100%;
    height: 100%;
  }
  }
  .zan{
    float:right;
    width: 50px;
    color:#666666;
    text-align: right;
  img{
    display:inline-block;
    width: 4vw;
  }
  }
  .commetContent{
    margin: 1vw 0;
    padding-left: 11vw;
    color:#333333;
    font-size:13px;
  }
  .commentTime{
    font-size:11px;
    color:#666666;
    margin-bottom: 4vw;
    padding-left: 11vw;
  }}
</style>
